<template id="my_invoice">
    <div class="try_m">
        <div class="my_invoice_top">
            <img src="../image/blue_da.png" alt="" @click="get_tui()">
            <h4>确认发票信息</h4>
        </div>
        <div class="my_invoice_1" @click="get_blue(status)">
              <p class="my_invoice_p">开具发票</p>
            <span class="my_invoice_span" ><time></time></span>
        </div>
        <!--发票类型-->
        <div v-show="size_m">
            <div class="my_invoice_2" @click="get_size()">
                <span>开票类型</span>
                <span>{{invoice_types[invoice_type]}}</span>
                <img src="../image/top.jpg" alt="">
            </div>
            <div class="my_invoice_con">
            <p class="my_invoice_3">电子普通发票是税务局认可的可靠有效发票，其法律效力、根本用途及使用规定等同于纸纸发票</p>
            </div>
            <div class="my_invoice_4">
                <span>*发票抬头</span>
                <span @click="get_in(1)" v-bind:id="[per]" >个人</span>
                <span @click="get_in(2)" v-bind:id="[company]">公司</span>
            </div>
            <div class="per" v-show="per_c">
                <span>个人</span>
            </div>
             <div class="my_invoice_5" v-show="dis">
                 <input type="text" placeholder="输入单位名称" v-model="company_name">
             </div>
            <div class="my_invoice_5" v-show="dis">
                <input type="text" placeholder="*纳税人识别号" v-model="identify_number">
                <img src="../image/wen.png" alt="">
            </div>
            <div class="my_invoice_6" @click="get_food()">
                <span>*发票内容</span>
                <span>{{invoice_content_types[content_type]}}</span>
                <img src="../image/top.jpg" alt="">
            </div>
            <div class="my_invoice_6" style="border-bottom:0.1rem solid #f5f4f2">
                <span>*发票金额</span>
                <span>¥{{amount}}</span>
            </div>
            <div class="my_invoice_9" style="border:0;">
                <span>收票人手机</span>
                <input type="text" v-model="mobile">
           </div>
            <div class="my_invoice_9" style="border-bottom:0.1rem solid #f5f4f2">
                <span>收票人邮箱</span>
                <input type="text" v-model="email">
            </div>
            <div class="my_invoice_7">
                     <p class="my_invoice_7_1">发票须知:</p>
                <ul class="my_invoice_7_list">
                    <li>1,单笔订单只支持开具一种类型的发票</li>
                    <li>2,开票金额为用户实际支付金额(不含礼品卡与不支持该发票类型的商品实付金额)</li>
                </ul>
            </div>
            <p style="height:1rem;"></p>
        </div>
       <p class="my_invoice_last" @click="submitFun()">确定</p>
        <!--发票类型-->
        <div class="my_invoice_size" v-if="my_inv">
            <div class="my_invoice_size_top">
                <span>发票类型</span>
                <span @click="get_all()">关闭</span>
            </div>
            <ul class="my_invoice_ul">
                <li v-for="(v,k) in invoice_types" v-bind:class="k == invoice_type ? 'selected' : ''" @click="selectIT(k)">
                    {{v}}<span v-if="k == 1">推荐</span>
                </li>
            </ul>
        </div>
        <div class="my_invoice_size" v-if="my_inv_size">
            <div class="my_invoice_size_top">
                <span>发票内容</span>
                <span @click="get_all()">关闭</span>
            </div>
            <ul class="my_invoice_ul">
                <li v-for="(v,k) in invoice_content_types" v-bind:class="k == content_type ? 'selected' : ''" @click="selectICT(k)">
                    {{v}}
                </li>
            </ul>
        </div>
        <!--背景弹窗-->
        <div class="back_bg" v-if="bg_backgrond" @click="get_all()"></div>
    </div>
</template>
<script>
    export default{
        name: 'my_invoice',
        data() {
            return {
                my_inv_size:false,
                my_inv:false,
                bg_backgrond:false,
                /*发票是个人还是公司*/
                per:'',
                company:'',
                dis:false,
                per_c:true,
                size_m:false,
                status:0,
                amount:0,

                invoice_type:1,
                invoice_header:1,
                company_name:'',
                identify_number:'',
                content_type:'',
                mobile:'',
                email:'',
                invoice_types:[],
                invoice_content_types:[],

                i_t_id:0,
                i_c_t_id:0,
            }
        },
        mounted:function () {
            let H=$(window).height();
            $('.try_m').height(H);

            let amount = this.GLOBAL.getCookie('pay_amount');
            this.amount = amount > 0 ? amount : 0;

            let status = this.GLOBAL.getCookie('is_invoice');
            this.status = status > 0 ? status : 0;
            if (this.status == 0) {
                $('.my_invoice_span').css({'background':'#bfbfbf'});
                $('.my_invoice_span time').css({'margin-left':'0'});
                this.size_m = false;
            } else {
                $('.my_invoice_span').css({'background':'#29adfc'});
                $('.my_invoice_span time').css({'margin-left':'0.36rem'});
                this.size_m = true;
            }

            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/Invoice.php?mode=info',
                {
                    params:{
                        uid:this.GLOBAL.getCookie('uid'),
                        time:this.GLOBAL.getCookie('time'),
                        token:this.GLOBAL.getCookie('token'),
                    },
                    jsonp:'callback'
                }
            ).then(function (res) {
                if (res.body.code != 200) {
                    alert(res.body.msg);
                    return false;
                }

                this.invoice_type = res.body.data.invoice_info.invoice_type ? res.body.data.invoice_info.invoice_type : 1;
                this.invoice_header = res.body.data.invoice_info.invoice_header ? res.body.data.invoice_info.invoice_header : 1;
                this.company_name = res.body.data.invoice_info.company_name;
                this.identify_number = res.body.data.invoice_info.identify_number;
                this.content_type = res.body.data.invoice_info.content_type ? res.body.data.invoice_info.content_type : 1;
                this.mobile = res.body.data.invoice_info.mobile;
                this.email = res.body.data.invoice_info.email;
                this.invoice_types = res.body.data.invoice_types;
                this.invoice_content_types = res.body.data.invoice_content_types;

                if(this.invoice_header == 1){
                    this.per='mingming';
                    this.dis=false;
                    this.per_c=true;
                } else {
                    this.company='mingming';
                    this.dis=true;
                    this.per_c=false;
                }
            });
            /*触摸事件*/
           // this.get_touch();

        },
        methods:{
            /*触摸滑动事件*/
        get_touch:function(){
            $('.my_invoice_span').on("click touchmove touchstart touchend",function(event){
                $('.my_invoice_span').innerHTML=event.type
                switch(event.type){
                    case "touchstart":
                        event.preventDefault();
                        break;
                    case "touchend":
                        event.preventDefault();
                        break;
                    case "touchmove":
                        event.preventDefault();
                        $('.my_invoice_span').css({'background':'#29adfc'});
                        $('.my_invoice_span time').css({'margin-left':'0.36rem'});
                        break;
                }
            });

        },
    /*发票类型*/
            get_size:function(){
                this.bg_backgrond=true;
                this.my_inv=true;

            },
            get_all:function(){
                this.bg_backgrond=false;
                this.my_inv=false;
                this.my_inv_size=false;
            },
            /*发票内容类型*/
            get_food:function(){
                this.bg_backgrond=true;
                this.my_inv_size=true;
            },
            /*开具发票*/
            get_blue:function(status){
                if (status == 0) {
                    $('.my_invoice_span').css({'background':'#29adfc'});
                    $('.my_invoice_span time').css({'margin-left':'0.36rem'});
                    this.size_m = true;
                    this.status = 1;
                } else {
                    $('.my_invoice_span').css({'background':'#bfbfbf'});
                    $('.my_invoice_span time').css({'margin-left':'0'});
                    this.size_m = false;
                    this.status = 0;
                }

                this.GLOBAL.setCookie('is_invoice', this.status);
            },

            get_tui:function(){
                window.history.go(-1);
            },

            get_in : function (type) {
                this.invoice_header=type;
                this.per='';
                this.company='';

                if(this.invoice_header == 1){
                    this.per='mingming';
                    this.dis=false;
                    this.per_c=true;
                } else {
                    this.company='mingming';
                    this.dis=true;
                    this.per_c=false;
                }
            },
            
            // 选择发票类型
            selectIT : function (id) {
                this.invoice_type = id;
            },

            // 选择发票内容类型
            selectICT : function (id) {
                this.content_type = id;
            },
            
            // 提交数据方法
            submitFun : function () {
                if (!this.invoice_type || !this.invoice_header || !this.content_type || !this.mobile) {
                    alert('信息请填写完整！');
                    return false;
                }

                if (this.invoice_header == 2 && (!this.company_name || !this.identify_number)) {
                    alert('信息请填写完整！');
                    return false;
                }
                if (this.invoice_type == 1) {
                    if (! this.email) {
                        alert('信息请填写完整！');
                        return false;
                    }
                }

                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Invoice.php?mode=updateInfo',
                    {
                        params:{
                            uid : this.GLOBAL.getCookie('uid'),
                            time : this.GLOBAL.getCookie('time'),
                            token : this.GLOBAL.getCookie('token'),
                            invoice_type : this.invoice_type,
                            invoice_header : this.invoice_header,
                            company_name : this.company_name,
                            identify_number : this.identify_number,
                            content_type : this.content_type,
                            mobile : this.mobile,
                            email : this.email,
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }
                    window.history.go(-1)
              /*  this.$router.push('/shop');*/
                  /*  alert(res.body.msg);*/
                });
            }
        },

    };

</script>
<style>
    .back_bg{
        height:100%;
        width:1000%;
        background:#000000;
        opacity:0.5;
        position: fixed;
        top:0;
        left:0;
        z-index:1;
    }
    /*背景*/
    .my_invoice_size_top span:nth-of-type(1){
        display:block;
        width:3rem;
        height:0.77rem;
        line-height:0.77rem;
        color:#646363;
        font-size:0.26rem;
        float:left;
        margin-left:0.2rem;
    }
    .my_invoice_size_top span:nth-of-type(2){
        display:block;
       /* width:3rem;*/
        height:0.77rem;
        line-height:0.77rem;
        color:#646363;
        font-size:0.26rem;
        float:right;
        margin-right:0.2rem;
    }
    .my_invoice_size_top{
        width:100%;
        height:0.77rem;
        border-bottom: 0.01rem solid #f0f0f0;
        margin-bottom:0.25rem;
    }
    /*list*/
    .my_invoice_ul li:nth-of-type(1) span{
        display:block;
        position:absolute;
        height:0.22rem;
        width:0.42rem;
        line-height:0.22rem;
        text-align:center;
        color:#ffffff;
        font-size:0.16rem;
        background:#29adfc;
        left:1.72rem;
        top:0.2rem;
        border-radius:0.05rem;
    }
    .my_invoice_ul li:nth-of-type(1){
        position:relative;
    }
    .my_invoice_ul li{
        list-style:none;
        height:0.62rem;
        line-height:0.62rem;
        color:#646363;
        font-size:0.24rem;
    }
    .my_invoice_ul li.selected{
        color:#29adfc;
    }
    .my_invoice_ul{
        width:6rem;
        height:2.74rem;
        padding-left:0.2rem;
    }
    .my_invoice_size{
        width:100%;
        height:3.77rem;
        position:fixed;
        bottom:0;
        left:0;
        z-index: 4;
        background: #ffffff;
        /*background:red;*/
    }
    /*发票类型*/
    .per{
        height:0.76rem;
        width:100%;
    }
    .per span{
        display:block;
        height:0.77rem;
        line-height:0.77rem;
        padding-left: 0.18rem;
        color:#888888;
        font-size:0.22rem;
        width:5rem;
        float:left;
        border-top:0.01rem solid #f0f0f0;
    }
    /*个人*/
    #mingming{
        border-color:#29adfc;
        color:#29adfc;
    }
    .try_m{
        overflow-x: hidden;
      /*  overflow-y: scroll;*/
    }
    .my_invoice_last{
        width:100%;
        height:0.88rem;
        line-height:0.88rem;
        text-align:center;
        color:#ffffff;
        font-size:0.3rem;
        position:fixed;
        bottom:0;
        left:0;
        background:#29adfc;
    }
    /*last*/
    .my_invoice_7_list li{
        min-height:0.34rem;
        line-height:0.34rem;
        color:#acacac;
        font-size:0.2rem;
        width:5.46rem;
        padding-left:0.18rem;
    }
    .my_invoice_7_list{
        width:100%;
        min-height:1rem;
    }
    /*列表说明*/
    .my_invoice_7_1{
        line-height:0.42rem;
        font-size:0.22rem;
        color:#969696;
        padding-left:0.18rem;
    }
    .my_invoice_7{
        width:100%;
        min-height:1.7rem;
        padding-top:0.18rem;
    }
    /*7*/
    .my_invoice_6 img{
        position:absolute;
        display:block;
        height:0.14rem;
        width:0.25rem;
        top:0.3rem;
        right:0.2rem;
    }
    .my_invoice_6 span:nth-of-type(2){
        width:3.7rem;
        height:0.8rem;
        line-height:0.8rem;
        color:#3a3a3a;
        float:left;
        font-size:0.26rem;
    }
    .my_invoice_6 span:nth-of-type(1){
        width:1.22rem;
        height:0.8rem;
        line-height:0.8rem;
        color:#aaaaaa;
        font-size:0.22rem;
        padding-left:0.18rem;
        margin-right:0.7rem;
        float:left;
    }
    .my_invoice_6{
        width:100%;
        height:0.8rem;
        border-top:0.01rem solid #f0f0f0;
        position:relative;
    }
    /*99*/
    .my_invoice_9 img{
        position:absolute;
        display:block;
        height:0.14rem;
        width:0.25rem;
        top:0.3rem;
        right:0.2rem;
    }
    .my_invoice_9 input:nth-of-type(1){
        width:3.7rem;
        height:0.8rem;
        display:block;
        outline: none;
        line-height:0.8rem;
        color:#3a3a3a;
        border:none;
        float:left;
        font-size:0.26rem;
    }
    .my_invoice_9 span:nth-of-type(1){
        width:1.22rem;
        height:0.8rem;
        line-height:0.8rem;
        color:#aaaaaa;
        font-size:0.22rem;
        padding-left:0.18rem;
        margin-right:0.7rem;
        float:left;
    }
    .my_invoice_9{
        width:100%;
        height:0.8rem;
        border-top:0.01rem solid #f0f0f0;
        position:relative;
    }
    /*6*/
    .my_invoice_5 img{
        position:absolute;
        display:block;
        height:0.3rem;
        width:0.3rem;
        top:0.27rem;
        right:0.2rem;
    }
    .my_invoice_5 input{
        display:block;
        height:0.8rem;
        outline: none;
        border:0;
        background:none;
        text-indent:0.2rem;
        width:100%;
    }
    .my_invoice_5 input::-webkit-input-placeholder{
        color:#cccccc;
        font-size:0.22rem;
    }
.my_invoice_5{
    width:100%;
    height:0.8rem;
    border-top:0.01rem solid #f0f0f0;
    position:relative;
}
    /*5*/
    .my_invoice_4 span:nth-of-type(3){
        width:0.86rem;
        height:0.4rem;
        line-height:0.4rem;
        /* text-indent: 0.18rem;*/
        color:#888888;
        font-size:0.24rem;
        border-radius:0.05rem;
        border:0.01rem solid #acacac;
        text-align:center;
    }
    .my_invoice_4 span:nth-of-type(2){
        width:0.86rem;
        height:0.4rem;
        line-height:0.4rem;
       /* text-indent: 0.18rem;*/
        color:#888888;
        font-size:0.24rem;
        border-radius:0.05rem;
        border:0.01rem solid #acacac;
        text-align:center;
        margin-right:0.2rem;
    }
    .my_invoice_4 span:nth-of-type(1){
        width:1.4rem;
        height:0.6rem;
        line-height:0.5rem;
        text-indent: 0.18rem;
        color:#888888;
        font-size:0.22rem;
        margin-right:0.52rem;
    }
    .my_invoice_4{
        width:100%;
        height:0.57rem;
        padding-top:0.24rem;
    }
    .my_invoice_4 span{
        float:left;
    }
    /*4*/
    .my_invoice_con{
        width:100%;
        min-height:0.8rem;
        padding-left:0.18rem;
        padding-top:0.1rem;
        border-bottom:0.1rem solid #f5f4f2;
    }
    .my_invoice_3{
        width:5.82rem;
        min-height:0.4rem;
        line-height:0.37rem;
        color:#adadad;
        font-size:0.2rem;

    }
    /*3*/
    .my_invoice_2 img{
        display:block;
        position:absolute;
        width:0.25rem;
        height:0.14rem;
        top:0.3rem;
        right:0.2rem;
    }
    .my_invoice_2 span:nth-of-type(2){
        width:3.7rem;
        height:0.79rem;
        line-height:0.79rem;
        color:#3a3a3a;
        font-size:0.28rem;
    }
    .my_invoice_2 span:nth-of-type(1){
        width:1.22rem;
        height:0.79rem;
        line-height:0.79rem;
        color:#aaaaaa;
        font-size:0.22rem;
        padding-left:0.18rem;
        margin-right:0.7rem;
    }
    .my_invoice_2 span{
        float:left;
    }
    .my_invoice_2{
        width:100%;
        height:0.79rem;
        border-bottom:0.01rem solid #f0f0f0;
        position:relative;
    }
    /*2*/
    .my_invoice_span time{
        display:block;
        height:0.52rem;
        width:0.52rem;
        border-radius:50%;
        background:#ffffff;
        /*margin-left:0.36rem;*/
    }
    .my_invoice_span{
        position:absolute;
        width:0.88rem;
        height:0.53rem;
        border-radius:0.5rem;
       /* background:#29adfc;*/
        background:#bfbfbf;
        top:0.16rem;
        right:0.2rem;
        padding-top:0.01rem;
        padding-left:0.01rem;
        padding-right:0.01rem
    }
    .my_invoice_p{
        height:0.79rem;
        line-height:0.79rem;
        color:#888888;
        font-size:0.24rem;
        text-indent: 0.2rem;
    }
    .my_invoice_1{
        width:100%;
        height:0.79rem;
        border-bottom:0.01rem solid #f0f0f0;
        position:relative;
    }
    /*1*/
    .my_invoice_top{
        height:0.74rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        background:#ffffff;
    }
    .my_invoice_top img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .my_invoice_top h4{
        height:0.7rem;
        color:#2eaffc;
        font-size:0.3rem;
        line-height:0.74rem;
        text-align:center;
        font-weight:normal;
    }
</style>
